<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="密码" :rules="rules.password" name="password">
            <a-input-password v-model:value="form.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="重复密码" :rules="rules.repassword" name="repassword">
            <a-input-password v-model:value="form.repassword" placeholder="请再次输入密码" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { PasswordRegular } from '@iframe/tools/utils/regular'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({})
const repasswordChecked = (rule, value) => {
    if (value === form.password) {
        return Promise.resolve()
    }
    return Promise.reject('两次密码不一致')
}
const rules = reactive({
    password: [
        { required: true, message: '请输入密码' },
        { pattern: PasswordRegular, message: '密码必须以字母开头，包括数字的8-20位字符串' }
    ],
    repassword: [{ required: true, message: '请输入重复密码' }, { validator: repasswordChecked }]
})
defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
